// 显示弹框,添加学员时显示
// document.querySelector('.username').innerHTML = localStorage.getItem('username')
back()

const list = document.querySelector('.list')
async function render() {
    const { data: { data } } = await axios('/students')
    document.querySelector('.total').innerHTML = `${data.length}位学员`
    list.innerHTML = data.map(item => {
        if (item.gender) {
            item.gender = '女'
        } else {
            item.gender = '男'
        }
        return `
                     <tr>
                      <td>${item.name}</td>
                      <td>${item.age}</td>
                      <td>${item.gender}</td>
                      <td>第${item.group}组</td>
                      <td>${item.hope_salary}</td>
                      <td>${item.salary}</td>
                      <td>${item.province + item.city + item.area}</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${item.id}></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${item.id}></i></a>
                      </td>
                    </tr>
        `
    }).join('')
}
render()
// 数据增删改查
//增加
const add = document.querySelector('#openModal')
const modalDom = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalDom)
const form = document.querySelector('form')
let flag
add.addEventListener('click', function () {
    flag = null
    modal.show()
})

//地区
fn()
const province = document.querySelector('[name="province"]')
const city = document.querySelector('[name="city"]')
const area = document.querySelector('[name="area"]')
async function fn() {
    const p = await axios.get('/api/province')
    const { data: { list } } = p
    province.innerHTML = '<option>省份</option>' + list.map(item => {
        return `
                <option value="${item}">${item}</option>
                `
    }).join('')
    let a
    let b
    province.addEventListener('change', function (e) {
        a = e.target.value
        const c = axios.get(`/api/city?pname=${a}`)
            .then(res => {
                const { data: { list: cc } } = res
                const htm = cc.map(item => {
                    return `
                        <option value="${item}">${item}</option>
                        `
                }).join('')
                area.innerHTML = `<option>地区</option>`
                city.innerHTML = `<option>城市</option>` + htm
            })

        city.addEventListener('change', function (e) {
            b = e.target.value
            const d = axios.get(`/api/area?pname=${a}&cname=${b}`)
                .then(res => {
                    const { data: { list: ee } } = res
                    const htm = ee.map(item => {
                        return `
                            <option value="${item}">${item}</option>
                            `
                    }).join('')
                    area.innerHTML = `<option>地区</option>` + htm
                })
        })
    })
}
//增加
const submit = document.querySelector('#submit')

submit.addEventListener('click', function () {
    if (flag) {

    } else {
        const data = serialize(form, { hash: true, empty: true })
        console.log(data);
        data.age = +data.age
        data.gender = +data.gender
        data.hope_salary = +data.hope_salary
        data.salary = +data.salary
        data.group = +data.group
        axios.post('/students', data)
            .then(res => {
                // console.log(res);
                render()
            })
    }
    form.reset()
    modal.hide()
})

//编辑和删除，事件委托
const uname = document.querySelector('[name="name"]')
const age = document.querySelector('[name="age"]')
const group = document.querySelector('[name="group"]')
const hsalary = document.querySelector('[name="hope_salary"]')
const sala = document.querySelector('[name="salary"]')
list.addEventListener('click', async function (e) {
    if (e.target.classList.contains('bi-pen')) {
        flag = e.target.dataset.id
        modal.show()
        const { data: { data } } = await axios.get(`/students/${flag}`)
        console.log(data.area);
        console.log(data.city);
        uname.value = data.name
        age.value = data.age
        group.value = data.group
        hsalary.value = data.hope_salary
        sala.value = data.salary
        province.value = data.province
    }
    if (e.target.classList.contains('bi-trash')) {
        flag = e.target.dataset.id
        const res = await axios.delete(`/students/${flag}`)
        console.log(res);
        render()
    }
})

